<template>
    <div class="main-container" id="content">
        <div class="main-content">
            <div class="top-content">
                <div class="top-name">报警记录</div>
                <el-button class="pad-back" @click="back()">返回</el-button>
            </div>
            <div class="bottom-content">
                <div class="bottom-box">
                    <!-- 选择盒子样式 -->
                    <div class="search-box">
                        <el-form :inline="true" ref="searchForm" :model="searchForm" class="demo-form-inline">
                            <el-form-item label="公司名称">
                                <div class="my-el-select">
                                    <el-cascader v-model="searchForm.companyId" placeholder="请选择公司名称"
                                        :options="companyArray" :props="{
                                            checkStrictly: true,
                                            value: 'id',
                                            label: 'name',
                                            children: 'childList',
                                        }" style="width:150px" @change="changeTreeItem" clearable></el-cascader>
                                </div>
                            </el-form-item>
                            <el-form-item label="基地名称">
                                <div class="my-el-select">
                                    <el-select v-model="searchForm.baseId" placeholder="请选择基地名称" @change="onSubmit"
                                        style="width:150px!important" clearable>
                                        <el-option v-for="item in baseArray" :key="item.id" :label="item.name"
                                            :value="item.id"></el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                            <el-form-item label="控制箱名称">
                                <div class="my-el-select">
                                    <el-select v-model="searchForm.boxId" placeholder="请选择控制箱名称" @change="onSubmit"
                                        style="width:150px!important" clearable>
                                        <el-option v-for="item in boxArray" :key="item.id" :label="item.name"
                                            :value="item.id"></el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                            <el-form-item>



                                <div class="my-el-search">
                                    <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
                                    <el-button @click="resetForm">重置</el-button>
                                </div>

                            </el-form-item>
                        </el-form>
                    </div>
                    <!-- 列表渲染 -->
                    <div class="list">
                        <NxTablePad :table-cols="tableCols" :table-data="tableData" :pag-ination="pagination"
                            :isIndex="true" class="table-wrap" @refresh="refresh" :height="'47rem'">
                            <template slot="alarmLength" slot-scope="scope">
                                <span>{{ scope.row.alarmLength }} 秒</span>

                            </template>

                        </NxTablePad>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
import NxTablePad from "@/components/NxTablePad.vue";
import { Page } from "@/utils/pagination";
import {

    getDataDeviceAlarmList,
    getObjBoxs
} from '@/api/home'
import { getCompanyInfoTree } from "@/api/company";
import {
    getSysCompanyBases
} from "@/api/system";
import { getStockInOrderPadList, getStockInOrderDetailPad, approveStockInOrderPad } from "@/api/godown";
export default {
    components: {
        NxTablePad,
    },
    data() {
        return {
            companyArray: [],
            baseArray: [],
            boxArray: [],
            // 查询字段
            searchForm: {
                pageNum: 1,
                pageSize: 10,
                type: 0,
                typeName: "",
                approveStatus: "",
                companyId: "",
                baseId: "",
                startDate: "",
                endDate: "",
                code: "",
            },
            // 表格字段
            tableCols: [
                {
                    label: '控制箱名称',
                    prop: 'boxName',
                    align: 'center',
                },
                {
                    label: '鱼池',
                    prop: 'fishpondName',
                    align: 'center',
                },

                {
                    label: '告警类型',
                    prop: 'alarmType',
                    align: 'center',
                },
                {
                    label: '报警时长(秒)',
                    slot: 'alarmLength',
                    align: 'center',
                },
                {
                    label: '开始时间',
                    prop: 'startDate',
                    align: 'center',
                },
                {
                    label: '结束时间',
                    prop: 'endDate',
                    align: 'center',
                },



            ],
            tableData: [],
            date: [], // 日期范围
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            },
            pagination: new Page(),
            detailId: "", //详情rowid
            detailStatus: "deatail",
            detailIsDialog: false, //详情审核页面状态
            typeName: "",
            infosData: [], // 转移记录详情
            userType: "", // 用户类型（0超级管理员，1公司管理员，2公司员工）
        };
    },
    async mounted() {
        // 初始化加载
        this.userType = Number(window.localStorage.getItem("userType"));
        this.searchForm.userType = this.userType
        console.log(this.searchForm.userType);
        await this.getCompanyInfoTree();
        await this.getList();
    },
    methods: {
        // 返回
        back() {
            this.$router.go(-1);
        },
        // 查询
        onSubmit() {
            this.pagination.pageNum = 1;
            this.getList();
        },

        // 分页查询
        refresh(val) {
            this.searchForm.pageNum = val.pageNum;
            this.searchForm.pageSize = val.pageSize;
            this.getList();
        },
        // 查询列表
        getList() {
            getDataDeviceAlarmList(this.searchForm).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.data;
                    this.pagination.count = res.data.total;
                }
            });
        },
        // 详情
        handleDetail(row) {
            this.detailId = row.id + "";
            this.detailStatus = "see";
            this.detailIsDialog = true;
        },
        //审批
        handleApproval(row) {
            this.$confirm("正在对该入库记录进行审批是否通过?", "提示", {
                confirmButtonText: "通过",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    approveStockInOrderPad({ id: row.id }).then((res) => {
                        if (res.code == 200) {
                            this.$message({
                                type: "success",
                                message: res.msg,
                            });
                            this.getList();
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消",
                    });
                });
        },
        getCompanyInfoTree() {

            getCompanyInfoTree({ id: 0 }).then((res) => {
                if (res.code == 200) {
                    this.companyArray = res.data
                    if (res.data.length > 0) {
                        this.searchForm.companyId = res.data[0].id
                        this.getSysCompanyBases()
                    }
                }
            })

        },
        changeTreeItem(val) {
            if (val) {
                this.searchForm.companyId = val[val.length - 1]
            } else {
                this.searchForm.companyId = ''
            }

            this.searchForm.baseId = ''
            this.baseArray = []

            // 获取基地列表
            this.getSysCompanyBases()
        },
        getSysCompanyBases() {
            if (
                this.searchForm.companyId === '' ||
                this.searchForm.companyId == null
            ) {
                return
            }

            getSysCompanyBases({ id: this.searchForm.companyId }).then((res) => {
                if (res.code == 200) {
                    this.baseArray = res.data
                    if (res.data.length > 0) {
                        this.searchForm.baseId = res.data[0].id
                        this.getObjBoxs()

                    }
                }
            })
        },

        getObjBoxs() {
            getObjBoxs({ id: this.searchForm.baseId }).then((res) => {
                if (res.code == 200) {
                    this.boxArray = res.data;
                }
            });
        },
        // 重置表单
        resetForm() {
            this.searchForm = {
                pageNum: 1,
                pageSize: 10,
                type: 0,
                typeName: "",
                approveStatus: "",
                companyId: "",
                baseId: "",
                startDate: "",
                endDate: "",
                code: "",
            };
            this.date = [];


            this.onSubmit();
        },


    },
};
</script>
<style lang="less" scoped>
/*滚动条整体样式*/
::-webkit-scrollbar {
    width: 0.59rem;
    height: 8.93rem;
}

/*滚动条里面小方块*/
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #d9d9d9;
}

/*滚动条里面轨道*/
::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #ededed;
}

* {
    box-sizing: content-box;
}

.main-container {
    background-color: #045cad;
    padding: 1rem 0 1.5rem 0;

    .main-content {
        min-height: calc(100vh - 90px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .top-content {
            width: 97%;
            height: 5rem;
            // margin-top: 1rem;
            margin-bottom: 0.5rem;
            color: #ffffff;
            display: flex;
            justify-content: center;
            font-family: "宋体";
            position: relative;
            // border: 1px solid red;
            position: relative;

            .top-name {
                font-size: 2.59rem;
                font-weight: 900;
            }

            .el-icon-full-screen {
                line-height: 3rem;
                margin-left: 5rem;
            }
        }

        .bottom-content {
            width: 97%;
            // min-height: 30rem;
            display: flex;
            justify-content: center;
            height: 70rem;
            background: #ffffff;
            border-radius: 0.43rem;

            .bottom-box {
                width: 97%;
                // display: flex;
                // position: relative;
                // 分页按钮适配
                /deep/.btn-prev {
                    min-width: 3.642857rem;
                    height: 3.642857rem;
                    font-size: 3.357143rem;
                }

                /deep/.btn-next {
                    min-width: 3.642857rem;
                    height: 3.642857rem;
                    font-size: 3.357143rem;
                }

                /deep/.el-pagination.is-background .el-pager li {
                    min-width: 3.642857rem;
                    height: 3.642857rem;
                    font-size: 2.357143rem;
                    line-height: 4rem;
                }

                /deep/.el-pagination .btn-prev .el-icon {
                    font-size: 3.357143rem;
                }

                /deep/.el-pagination .btn-next .el-icon,
                .el-pagination .btn-prev .el-icon {
                    font-size: 3.357143rem;
                }

                /deep/.el-pagination__total {
                    font-size: 1.928571rem;
                    line-height: 4rem;
                }
            }

            .search-box {
                width: 100%;
                display: flex;
                // justify-content: space-around;
                margin-top: 3rem;
                margin-bottom: 1rem;

                // 调整label的大小
                /deep/.el-form-item__label {
                    font-size: 2.2rem;
                    // display: flex;
                    line-height: 4rem;
                    font-weight: bold;
                    align-items: center;
                    font-family: "微软雅黑";
                    // font-weight: bold;
                    color: #4f5a64;
                    padding-right: 2rem;
                    padding-top: 0.2rem;
                    margin-left: 2rem;
                }
            }
        }
    }
}

// 调整button的宽高
.my-el-search {
    .el-button {
        // margin-left: 4rem;
        text-align: center;
        width: 10rem;
        height: 2.6rem;
        font-size: 2rem;
    }
}

// 调整select的宽高
.my-el-select {
    margin-right: 5rem;

    /* selecte 框的高度设置，默认是 40px*/
    /deep/ .el-input__inner {
        height: 4.5rem;
        width: 25rem;
        font-size: 1.86rem;
        padding-left: 2rem;
    }

    /* 下面设置右侧按钮居中 */
    .el-input__suffix {
        top: 5px;
    }

    //    icon样式设置
    /deep/.el-input__icon {
        font-size: 0;
    }

    .el-input__suffix-inner {
        display: inline-block;
    }

    /deep/.el-date-editor .el-range-separator {
        margin: 0 1rem;
        line-height: 4.285714rem;
        font-size: 1.86rem;
        width: 10%;
    }

    /deep/.el-range-editor.el-input__inner {
        padding: 0;
    }

    /deep/.el-date-editor .el-range-input {
        width: 100%;
        font-size: 1.86rem;
    }

    ::v-deep .el-select-dropdown__item {
        font-size: 2.16rem;
        height: 4.428571rem;
        line-height: 4.428571rem;
    }

    ::v-deep.el-input--small .el-input__inner {
        height: 4rem;
        width: 10rem !important;
        font-size: 1.3rem;
        text-align: center;
        padding: 0;
    }
}
</style>
  